<template>
  <div
    class="add-card-content"
    v-loading.fullscreen.lock="loading"
    fullscreen="false"
    element-loading-text="加载中"
    element-loading-background="rgba(0, 0, 0, 0.2)"
    element-loading-spinner="el-icon-loading"
  >
    房卡充值
    <div class="card-add-w">
      <el-form ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="玩家ID">
          <el-input v-model="playerId" autocomplete="off" placeholder="请输入玩家ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getUserInfo()">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="playerInfo.uid!=null" class="player-info">
      <div class="info-item">
        <span>用户头像:</span>
        <img v-if="playerInfo.avatar" :src="playerInfo.avatar" alt />
      </div>
      <div class="info-item">
        <span>用户ID:</span>
        {{playerInfo.uid}}
      </div>
      <div class="info-item">
        <span>用户昵称:</span>
        {{playerInfo.nickname}}
      </div>
      <div class="info-item">
        <span>性别:</span>
        <i v-if="playerInfo.gender">男</i>
        <i v-else>女</i>
      </div>
      <div class="info-item">
        <span>剩余房卡:</span>
        {{playerInfo.roomcard}}张
      </div>
      <el-button type="primary" @click="open" style="margin-top: 10px;">给他充卡</el-button>
    </div>
  </div>
</template>

<style lang="less">
.add-card-content {
  // height: 100vh;
  .card-add-w {
    margin-top: 50px;
    width: 30%;
  }
  .player-info {
    margin-top: 30px;
    margin-left: 48px;
    width: 30%;
    .info-item {
      padding: 5px 0;
      color: #000;
      img {
        width: 80px;
        height: 80px;
        vertical-align: middle;
        border-radius: 50%;
      }
      span {
        vertical-align: middle;
        width: 130px;
        display: inline-block;
      }
      i {
        padding-left: 8px;
      }
    }
  }
}
</style>

<script>
import { showTips } from "@/utils";
import store from "@/store/index.js";
import { mapMutations } from "vuex";
import { searchPlayer, addRoomCardForPlayer } from "@/api";
export default {
  data() {
    return {
      playerId: null,
      loading: false,
      userInfo: {},
      playerInfo: {
        avatar: null,
        gender: null,
        nickname: "",
        roomcard: null,
        uid: null
      }
    };
  },
  mounted() {
    this.userInfo = store.getters.getUserInfo;
    console.log(this.userInfo);
  },
  methods: {
     ...mapMutations(["setUserInfo"]),
    open() {
      if (this.playerInfo.uid != null) {
        this.$prompt("请输入充值数量", "提示", {
          confirmButtonText: "确定充值",
          cancelButtonText: "取消充值"
        })
          .then(({ value }) => {
            if (value && value > 0) {
              if (this.userInfo.roomCard - value >= 0) {
                this.loading = true;
                let params = {
                  uid: this.playerInfo.uid,
                  addNumber: value,
                  agentId: this.userInfo.agentId
                };
                addRoomCardForPlayer(params).then(res => {
                  this.loading = false;
                  if (res.code == 200) {
                    showTips("success", "充值成功");
                    //充值成功后重新获取玩家信息并修改当前管理员的房卡数
                    this.getUserInfo();
                    this.userInfo.roomCard -= value;
                    this.setUserInfo(this.userInfo);
                  } else {
                    this.$message.error("充值失败");
                  }
                });
              } else {
                  showTips("warning", "房卡余额不足，请充值！");
              }
            } else {
              showTips("warning", "请输入充卡数量");
            }
          })
          .catch(() => {});
      } else {
        showTips("warning", "请先获取用户信息");
      }
    },
    getUserInfo() {
      if (this.playerId == null) {
        showTips("warning", "请输入玩家ID");
        return;
      }
      this.loading = true;
      searchPlayer(this.playerId).then(res => {
        console.log(res);
        if (res.code == 200) {
          // showTips("success", res.msg);
          this.playerInfo = res.data;
        } else {
          this.$message.error("未查到该用户");
        }
        this.loading = false;
      });
    },
    resetForm(formName) {
      this.playerId = null;
      this.playerInfo = {};
    }
  }
};
</script>